<template>
  <div class="panel">
    <span class="yanhua yanhua_one" ref="yanhua_one"></span>
    <span class="yanhua yanhua_two" ref="yanhua_two"></span>
    <span class="yanhua yanhua_three" ref="yanhua_three"></span>
    <div class="container animated slideInDown">
      <p class="top">沃妹提前制作团圆饭时</p>
      <p>发现有四道菜的食材不见了</p>
      <p>好奇怪~</p>
      <p>没有食材，这可让</p>
      <p>沃妹犯了难</p>
      <p>机智的通心粉们</p>
      <p>一起来帮沃妹找食材吧</p>
      <p>找齐后，沃妹会送你</p>
      <p>神秘好礼呦！</p>
      <p class="bom" @click.passive.stop="closeYanhuaFunc"></p>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      key: ''
    }
  },
  mounted() {
    this.animatedFunc();
  },
  methods: {
    animatedFunc() {
      this.Velocity(this.$refs.yanhua_one, {
        opacity: '1',
        backgroundSize: '100% 100%'
      }, {
          duration: 500,         // 动画执行时间
          easing: "easeInOut",
          loop: false,           // 循环
          delay: '1000',          // 延迟
          mobileHA: true
        })
      this.Velocity(this.$refs.yanhua_two, {
        opacity: '1',
        backgroundSize: '60% 60%'
      }, {
          duration: 500,         // 动画执行时间
          easing: "easeInOut",
          loop: false,           // 循环
          delay: '1500',          // 延迟
          mobileHA: true
        })
      this.Velocity(this.$refs.yanhua_three, {
        opacity: '1',
        backgroundSize: '80% 80%'
      }, {
          duration: 500,         // 动画执行时间
          easing: "easeInOut",
          loop: false,           // 循环
          delay: '2000',          // 延迟
          mobileHA: true
        })
    },
    //关闭显示页面
    closeYanhuaFunc() {
      console.log('close');

      this.$emit('closeReady', false)
    }
  },
}
</script>
<style lang="less" scoped>
.panel {
  .yanhua {
    display: inline-block;
    position: absolute;
    left: 0;
    opacity: 0;
    z-index: 999;
    width: 149px;
    height: 134px;
    background: url("../assets/images/yanhua.png") no-repeat center center;
    background-size: 50% 50%;
  }
  .yanhua_one {
    top: 180px;
    left: 50px;
  }
  .yanhua_two {
    top: 350px;
    left: 500px;
  }
  .yanhua_three {
    top: 880px;
    left: 100px;
  }
  .container {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 374px;
    height: 972px;
    background: url("../assets/images/ready-panel.png") no-repeat;
    background-size: 374px 972px;
    p {
      color: #ffedad;
      font-size: 24px;
      line-height: 2em;
    }
    .top {
      margin-top: 145px;
    }
    .bom {
      width: 118px;
      height: 115px;
      background: url("../assets/images/ready-btn.png") no-repeat;
      background-size: 118px 115px;
      margin-bottom: 250px;
    }
  }
}
</style>
